<!--深度-->
<template>
  <div class="vt-depth">
    
    <div class="row jbetween">
      <text class="font24 text2">{{T('价格')}}</text>
      <text class="font24 text2">{{T('数量')}}</text>
    </div>
    
    <template v-if="depthSells && depthBuys">
      <!--深度-卖-->
      <div class="depth-cell" 
      v-for="(item, index) in depthSells" v-bind:key="index" 
      @click="priceClick(item.price)">
        <div :class="['depth-cell-color', Config.upDownBg(false)]" :style="{'width':item.width}"></div>
        <text :class="['font24',  Config.upDownFont(false)]">{{item.price}}</text>
        <text class="font24 text3">{{item.qty}}</text>
      </div>
      
      <!--深度-行情价-->
      <div class="depth-price" @click="priceClick(pair.last)">
        <text :class="['font36', Config.upDownFont(pair.increase)]">{{pair.last ? pair.last : '--'}}</text>
        <text :class="['font24', Config.upDownFont(pair.increase)]">{{'(' + (pair.increase ? pair.increase : '--') + '%)'}}</text>
      </div>

      <!--深度-买-->
      <div class="depth-cell"
      v-for="(item, index) in depthBuys"  v-bind:key="index" 
      @click="priceClick(item.price)">
        <div :class="['depth-cell-color', Config.upDownBg(true)]" :style="{'width':item.width}"></div>
        
        <text :class="['font24', Config.upDownFont(true)]">{{item.price}}</text>
        <text class="font24 text3">{{item.qty}}</text>
      </div>
    </template>
  </div>
</template>


<script>
import jconfig from "@/_js/config"
import jmath from "@/_js/math"
import jmodal from "@/_js/modal"
import jhttps from "@/_js/https"

const weexFunction = weex.requireModule("WeexFunction")
const WeexTrading = weex.requireModule("WeexTrading")
const globalEvent = weex.requireModule('globalEvent');

import I18N from "@/_i18n/i18n";
var T = I18N.t;
export default {

  props:{
    api: Object, //api
    pair: Object, //交易对
    depthCout: { //深度数量
      type: Number,
      default: 8,
    }
  },

  watch: {
    pair(val, oldVal) {
      if (val.baseCoin != oldVal.baseCoin || val.counterCoin != oldVal.counterCoin) {
        this.initDepth();
      } else {
      }
    }
  },

  data() {
    return {
      T:T,
      Config:jconfig,
      eventKey:'upTrading', //订阅事件Key

      depthSells:undefined, //深度卖
      depthBuys:undefined, //深度买
    };
  },

  mounted() {
    
    jconfig.init(()=>{
      this.initDepth();
      this.viewappear();
    }, [jconfig.OPT_UP_DOWN]);
  },
  
  computed: {
  },

  methods: {

    /************************************************* 通信*/
    //完全显示
    viewappear() {
      this.httpsGetDepth();
      setTimeout(() => {
        this.subscribe();
      }, 1000);
    },

    //完全隐藏
    viewdisappear() {
    },

    /********************************************** 初始化*/
    initDepth() {
      
      var depthSells = [];
      var depthBuys = [];
      for (let index = 0; index < this.depthCout; index++) {
        var data = {'price':'--', 'qty':'--', 'ratio':'0', 'width':'0'};
        depthSells.push(data);
        depthBuys.push(data);
      }
      this.depthSells = depthSells;
      this.depthBuys = depthBuys;
    },


    /**********************************************HTTPS*/
    //https深度
    httpsGetDepth(){

      
      var exchangeName = this.api.exchangeName.toLowerCase();
      var counterCoin = this.pair.counterCoin.toLowerCase();
      var baseCoin = this.pair.baseCoin.toLowerCase();
      var symbol = counterCoin+baseCoin;
      var param = {exchangeName, symbol};
      jhttps.post("manual/getDepth",param,true,(data)=>{

          if(data.status == 200){
            data = data.data;
            this.upDepaths(data.askList, data.bidList, data.marketPrice);
          } else {
          }
      });
    },

    /********************************************** 其他*/
    //订阅
    subscribe() {

      var exchangeName = this.api.exchangeName.toLowerCase();
      var counterCoin = this.pair.counterCoin.toLowerCase();
      var baseCoin = this.pair.baseCoin.toLowerCase();
      var themes = [];
      var url = jconfig.websocketUrl + exchangeName + '/' + counterCoin + baseCoin;
      weexFunction.debugLog('订阅：'+url)
      WeexTrading.getTrading({url, exchangeName, themes});
      globalEvent.addEventListener(this.eventKey, (e)=>{
        this.upDepaths(e.askList, e.bidList, e.marketPrice);
      });
    },

    //取消订阅
    cancelSubscribe() {
      weexFunction.debugLog('取消订阅')
      WeexTrading.cancelTrading(this.api.exchangeName);
      globalEvent.removeEventListener(this.eventKey)
    },

    //更新深度
    upDepaths(askList, bidList, priceMap) {
      
      //卖单
      this.depthSells = this.upDatas(askList).reverse();
      
      //买单
      this.depthBuys = this.upDatas(bidList);
      
      //行情价
      if (priceMap) {

        var last = jmath.xiaoshu(priceMap.last, this.pair.baseCoinDecimal, 2);
        if (!this.pair.last) {
          this.priceClick(last);
        }
        this.pair.last = last;
        this.pair.increase = priceMap.priceChangePercent;
      }
    },

    //更新数据-深度、行情价、usdt价
    upDatas(datas) {
 
      var arrs = [];
      var num = 0;
      for (let index = 0; index < this.depthCout; index++) {

        if (index < datas.length) {
          var data = datas[index];
          data.qty = jmath.xiaoshu(data.qty, this.pair.counterCoinDecimal, 2);
          data.price = jmath.xiaoshu(data.price, this.pair.baseCoinDecimal, 2);
          num = jmath.jia(num, data.qty);
          arrs.push(data);
        } else {

          var data = {'price':'--', 'qty':'--', 'ratio':'0'};
          arrs.push(data);
        }
      }

      arrs.forEach((data)=>{
        var ratio = jmath.chu(data.qty, num);
        data.width = jmath.cheng('300', ratio, 0, 2)+'px';
      })

      return arrs;
    },

    /********************************************** 点击*/
    //价格点击
    priceClick(price) {
      if(price=='--') return;
      this.$emit('price', price+'')
    }
  }
};

</script>

<style src="@/_css/style.css" ></style>

<style scoped>

/*******************************头部容器*/
.vt-depth{
  flex-direction: column;
  width: 280px;
}
.depth-cell{
  height:44px;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.depth-cell-color{
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.1;
  height:44px;
}
.depth-price {
  height:140px;
  flex-direction: column;
  justify-content: center;
}
</style>